<template >
   <div>
    <div class="form_wrap">
      <el-form inline>
        <el-form-item label="部门名称">
          <el-input v-model="queryForm.deptName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select style="width:100px;" v-model="queryForm.status">
            <el-option value="1" label="正常">正常</el-option>
            <el-option value="0" label="停用">停用</el-option>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      
      </el-form>
      <div>
        <el-button @click="deptFlag=true" type="primary" :icon="Plus" >新增</el-button>
        <el-button @click="expandAll=!expandAll" :icon="Sort">展开/折叠</el-button>
      </div>
    </div>
    <div>
      <el-table :data="deptList"
      row-key="deptId"
      node-key="deptId"
      v-if="deptList.length!=0"
      :default-expand-all="expandAll"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column label="部门名称" prop="deptName"></el-table-column>
        <el-table-column prop="orderNum" label="排序"></el-table-column>
        <el-table-column label="状态">
          <template #default="{row}">
             <span v-if="row.status==='1'">正常</span>
             <span v-if="row.status==='0'">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="操作">
            <template #default="{row}">
               <el-link type="primary" @click="toEdit(row.deptId)">修改</el-link>
               <el-link @click="toAdd(row.deptId)" style="margin:0 10px;" type="primary">新增</el-link>
               <el-link @click="toDel(row.deptId)" type="primary" v-if="row.deptId!=100">删除</el-link>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增部门 -->
     <el-dialog v-model="deptFlag" width="50%" title="添加部门">
      <el-form inline ref="deptFormRef" :rules="rules" :model="formObj">
          <el-form-item style="width:100%" label="上级部门" prop="parentId">
            <el-tree-select v-model="formObj.parentId" :data="deptList"
            row-key="deptId"
            node-key="deptId"
            :props="{label:'deptName',children:'children'}">

            </el-tree-select>     
         </el-form-item>
         <el-form-item  style="width:40%" label="部门名称" prop="deptName">
            <el-input v-model="formObj.deptName"></el-input>  
         </el-form-item>
         <el-form-item style="width:40%" label="显示排序" prop="orderNum">
            <el-input-number v-model="formObj.orderNum" :min="0" :max="9999999999" controls-position="right" ></el-input-number>  
         </el-form-item>
         <el-form-item style="width:40%" label="负责人">
            <el-input v-model="formObj.leader"></el-input>  
         </el-form-item>
         <el-form-item style="width:40%" label="联系电话">
            <el-input v-model="formObj.phone"></el-input>  
         </el-form-item>
         <el-form-item style="width:40%" label="邮箱">
            <el-input v-model="formObj.email"></el-input>  
         </el-form-item>
         <el-form-item style="width:40%" label="部门状态">
           <el-radio-group v-model="formObj.status">
              <el-radio value="1" label="正常"></el-radio>
              <el-radio value="0" label="停用"></el-radio>
           </el-radio-group>
         </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="toSave">确定</el-button>
        <el-button @click="deptFlag=false">取消</el-button>
      </template>
     </el-dialog>
   </div>
 </template>
 <script setup>
 import {Plus,Sort} from '@element-plus/icons-vue'
import {listDept,addDept,getDept,updateDept,delDept} from '@/api/system/dept'
import {reactive,toRefs,watch} from 'vue' 
import {handleTree} from '@/utils/ruoyi'
import {ElMessage } from 'element-plus'
let expandAll=ref(true); //是否展开所有节点
 let data=reactive({
     queryForm:{ //查询表单数据
        pageNum:1,
       pageSize:10,
       deptName:'',
       status:''
     },
     deptList:[],//部门列表数据
     formObj:{ //添加和修改需要的数据
         deptName: "",  //部门名称
         email: "",// 邮箱
         leader: "",  //负责人
         orderNum: 0 ,  //排序
         parentId: '' , //上级部门id
         phone: "",  //联系电话
         status: "0" ,// 状态
     },
     rules:{
      parentId:[{required:true,message:'上级部门不能为空',trigger:'blur'}],
      deptName:[{required:true,message:'部门名称不能为空',trigger:'blur'}],
      orderNum:[{required:true,message:'排序不能为空',trigger:'blur'}],
     }
 })
//  vue3 提供了toRefs 的方法 将reactive对象中的属性转换为ref对象
let {queryForm,deptList,formObj,rules}=toRefs(data)

// 获取部门数据
let getList=async ()=>{
    let res=await listDept(queryForm.value)
    console.log(res,"----岗位列表--------")
    // handleTree 将数据转换为树形结构
    deptList.value=handleTree(res.data,'deptId',"parentId")
} 
  getList();
  let deptFlag=ref(false)//弹出层

  let toAdd=(deptId)=>{ //点击表格的新增
      deptFlag.value=true
      formObj.value.parentId=deptId //上级部门回显一下

  }
  let deptFormRef=ref(null)
  let toSave= ()=>{ //增加
    deptFormRef.value.validate(async (vali)=>{
          if(vali){
            if(formObj.value.deptId){
               let editRes=await updateDept(formObj.value)
               console.log(editRes,"修改部门")
               ElMessage.success('修改部门成功')
            }else{
              let res=await addDept(formObj.value)
              console.log(res,"添加部门")
              ElMessage.success('添加部门成功')
            }
           
            deptFormRef.value.resetFields()
            deptFlag.value=false
         
            getList()

          }
      })
      
  }
  // 点击修改 
  let toEdit=async (deptId)=>{
    deptFlag.value=true
    let res=await  getDept(deptId)
    console.log(res,"部门详情接口数据 ")
    formObj.value=res.data
  }
  // 监听弹出层 关闭 清空表单数据
 
  watch(()=> deptFlag.value,(val)=>{
    if(!val){
      formObj.value={
        deptName: "",  //部门名称
        email: "",// 邮箱
        leader: "",  //负责人
        orderNum: 0 ,  //排序
        parentId: '' , //上级部门id
        phone: "",  //联系电话
        status: "0" ,// 状态
      }
    }
  })
  // 删除接口
  let toDel=async (deptid)=>{
      let res=await delDept(deptid)
      console.log(res,"删除接口")
      ElMessage.success('删除成功')
      getList()
  }
 </script>
 <style lang="scss" scoped>
    .form_wrap{
      padding: 20px; 
      box-sizing: border-box;
    }
 </style>